<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { generateQRCode } from "@/utils/code/code";
const props = defineProps(["tagGraph"]);
let qrcodeModel = reactive({
  textType: "manual",
  qrcodeType: "qrcode",
  text: "123456789",
  dynamicTextNumber: 0,
  dynamicTextIncrement: 1
});
const codeOptions = [
  { label: "QRCode", value: "qrcode" },
  { label: "dotcode", value: "dotcode" },
  { label: "azteccode", value: "azteccode" },
  { label: "hanxin", value: "hanxin" },
  { label: "micropdf417", value: "micropdf417" },
  // { label: "maxicode", value: "maxicode" },
  { label: "pdf417", value: "pdf417" },
  { label: "pdf417compact", value: "pdf417compact" }
];
const textTypeOptions = [
  {
    label: "手动输入",
    value: "manual"
  },
  {
    label: "序列号",
    value: "sequence"
  }
];

// 监听tagGraph的变化
watch(
  () => props.tagGraph,
  newVal => {
    if (newVal) {
      const activeObject = newVal.getActiveObject();
      if (activeObject) {
        const {
          qrcodeType = "qrcode",
          text = "123456789",
          dynamicTextIncrement = 1,
          dynamicTextNumber = 0,
          textType = "manual"
        } = activeObject;
        Object.assign(qrcodeModel, {
          qrcodeType,
          text,
          dynamicTextIncrement,
          dynamicTextNumber,
          textType
        });
      }
    }
  },
  {
    immediate: true
  }
);

const generateCode = () => {
  generateQRCode(qrcodeModel.qrcodeType, qrcodeModel.text)
    .then(base64 => props.tagGraph.setSrc(base64))
    .catch(err => console.error(err));
};
const handleChangeqrCodeData = () => {
  const activeObject = props.tagGraph.getActiveObject();
  if (activeObject) {
    Object.assign(activeObject, {
      qrcodeType: qrcodeModel.qrcodeType,
      text: qrcodeModel.text,
      dynamicTextIncrement: qrcodeModel.dynamicTextIncrement,
      dynamicTextNumber: qrcodeModel.dynamicTextNumber,
      textType: qrcodeModel.textType
    });
    props.tagGraph.saveState();
    props.tagGraph.canvas.renderAll();
  }
};
</script>

<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="条形码类型">
        <el-select
          v-model="qrcodeModel.qrcodeType"
          style="width: 100%"
          @change="generateCode(), handleChangeqrCodeData()"
        >
          <el-option
            v-for="(item, index) in codeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select
          v-model="qrcodeModel.textType"
          style="width: 100%"
          @change="handleChangeqrCodeData"
        >
          <el-option
            v-for="(item, index) in textTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="当前内容">
        <el-input
          v-model="qrcodeModel.text"
          type="textarea"
          @input="generateCode(), handleChangeqrCodeData"
        />
      </el-form-item>

      <div v-if="qrcodeModel.textType == 'sequence'">
        <el-form-item label="变化量">
          <el-input-number
            v-model="qrcodeModel.dynamicTextIncrement"
            style="width: 100%"
            @change="handleChangeqrCodeData"
          />
        </el-form-item>
        <el-form-item label="打印序列号个数">
          <el-input-number
            v-model="qrcodeModel.dynamicTextNumber"
            style="width: 100%"
            @change="handleChangeqrCodeData"
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
